<template>
  <div class="main-content-box">
    <div class="demoDiv">
      <div class="title_for_layout">
        <h3>不确定X、Y坐标值，单个设备，辐射树形布局(生态辐射树)</h3>
      </div>
      <div class="toolDiv">
        <div class="zoom zoomOut" title="放大" @click="getZoomOut">
          <i class="iconfont">&#xe640;</i>
        </div>
        <div class="zoom zoomIn" title="缩小" @click="getZoomIn">
          <i class="iconfont">&#xe624;</i>
        </div>
        <!-- <div class="zoom allViews" title="全部线路" @click="showAllViews">
          <i class="iconfont">&#xe697;</i>
        </div>-->
        <div class="zoom refreshViews" title="刷新拓扑图" @click="refreshViews">
          <i class="iconfont">&#xe64d;</i>
        </div>
      </div>
      <div id="container"></div>
      <div class="showDetails" v-if="isShowDetails">
        <p class="details-title">详细信息</p>
        <span class="closeDetail" @click="closeDetail">
          <i class="iconfont">&#xe60b;</i>
        </span>
        <div class="details-info">
          <div class="details-info-items">
            <h4 class="info-items-label">名称：</h4>
            <h4 class="info-items">{{showNodeDetailsObj.label}}</h4>
          </div>
          <div class="details-info-items">
            <h4 class="info-items-label">Id：</h4>
            <h4 class="info-items">{{showNodeDetailsObj.id}}</h4>
          </div>
          <div class="details-info-items">
            <h4 class="info-items-label">状态：</h4>
            <h4 class="info-items"></h4>
          </div>
          <div class="details-info-items">
            <h4 class="info-items-label">描述信息：</h4>
            <p class="info-items-description">此处是对节点的一些介绍描述信息</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
import Util from "@antv/g6/lib/util";
import { getTreeTopology } from "../../../nodeApi/api/getData.js"
export default {
  name: 'g6demo14',
  data () {
    return {
      currentGraph: {},
      isShowDetails: false,
      showNodeDetailsObj: {},
      // showEdgeDetailsObj: {},
      /*  orgData: {
         id: "Modeling Methods",
         label: "Modeling Methods",
         size: 80,
         text: '\ue6ec',
         style: {
           fill: 'red'
         },
         labelCfg: {
           style: {
             fill: "red"
           },
           position: 'bottom',
           offset: [110, 10, 10, 10],
         },
         backgroundConfig: null,
         levelFlag: 'center',
         lineNum: 3,
         children: [
           {
             id: "Classification",
             label: "Classification",
             size: 50,
             text: '\ue68c',
             isFisrtNodes: true,
             style: {
               fill: 'skyblue'
             },
             labelCfg: {
               style: {
                 fill: "skyblue"
               },
             },
             backgroundConfig: null,
             collapsed: true,
             levelFlag: 'originOne',
             lineNum: 2,
             children: [
               {
                 id: "Logistic regression",
                 label: "Logistic regression",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
                 collapsed: true,
               },
               {
                 id: "Linear discriminant analysis",
                 label: "Linear discriminant analysis",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 4,
                 collapsed: true,
               },
               {
                 id: "Rules",
                 label: "Rules",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
                 collapsed: true,
               },
               {
                 id: "Decision trees",
                 label: "Decision trees",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 4,
                 collapsed: true,
               },
               {
                 id: "Naive Bayes",
                 label: "Naive Bayes",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 2,
                 collapsed: true,
               },
               {
                 id: "K nearest neighbor",
                 label: "K nearest neighbor",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 1,
                 collapsed: true,
               },
               {
                 id: "Probabilistic neural network",
                 label: "Probabilistic neural network",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
                 collapsed: true,
               },
               {
                 id: "Support vector machine",
                 label: "Support vector machine",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 6,
                 collapsed: true,
               }
             ]
           },
           {
             id: "Consensus",
             label: "Consensus",
             size: 50,
             text: '\ue68c',
             isFisrtNodes: true,
             style: {
               fill: 'skyblue'
             },
             labelCfg: {
               style: {
                 fill: "skyblue"
               },
             },
             backgroundConfig: null,
             collapsed: true,
             levelFlag: 'originOne',
             lineNum: 3,
             children: [
               {
                 id: "Models diversity",
                 label: "Models diversity",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
                 collapsed: true,
                 children: [
                   {
                     id: "Different initializations",
                     label: "Different initializations",
                     size: 15,
                     text: '\ue679',
                     style: {
                       fill: 'red'
                     },
                     labelCfg: {
                       style: {
                         fill: "orange"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   },
                   {
                     id: "Different parameter choices",
                     label: "Different parameter choices",
                     size: 15,
                     text: '\ue743',
                     style: {
                       fill: 'black'
                     },
                     labelCfg: {
                       style: {
                         fill: "purple"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 5,
                     collapsed: true,
                   },
                   {
                     id: "Different architectures",
                     label: "Different architectures",
                     size: 15,
                     text: '\ue679',
                     style: {
                       fill: 'red'
                     },
                     labelCfg: {
                       style: {
                         fill: "orange"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   },
                   {
                     id: "Different modeling methods",
                     label: "Different modeling methods",
                     size: 15,
                     text: '\ue743',
                     style: {
                       fill: 'black'
                     },
                     labelCfg: {
                       style: {
                         fill: "purple"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   },
                   {
                     id: "Different training sets",
                     label: "Different training sets",
                     size: 15,
                     text: '\ue679',
                     style: {
                       fill: 'red'
                     },
                     labelCfg: {
                       style: {
                         fill: "orange"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 2,
                     collapsed: true,
                   },
                   {
                     id: "Different feature sets",
                     label: "Different feature sets",
                     size: 15,
                     text: '\ue743',
                     style: {
                       fill: 'black'
                     },
                     labelCfg: {
                       style: {
                         fill: "purple"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   }
                 ]
               },
               {
                 id: "Methods",
                 label: "Methods",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
                 collapsed: true,
                 children: [
                   {
                     id: "Classifier selection",
                     label: "Classifier selection",
                     size: 15,
                     text: '\ue679',
                     style: {
                       fill: 'red'
                     },
                     labelCfg: {
                       style: {
                         fill: "orange"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   },
                   {
                     id: "Classifier fusion",
                     label: "Classifier fusion",
                     size: 15,
                     text: '\ue679',
                     style: {
                       fill: 'red'
                     },
                     labelCfg: {
                       style: {
                         fill: "orange"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 4,
                     collapsed: true,
                   }
                 ]
               },
               {
                 id: "Common",
                 label: "Common",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
                 collapsed: true,
                 children: [
                   {
                     id: "Bagging",
                     label: "Bagging",
                     size: 15,
                     text: '\ue743',
                     style: {
                       fill: 'black'
                     },
                     labelCfg: {
                       style: {
                         fill: "purple"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   },
                   {
                     id: "Boosting",
                     label: "Boosting",
                     size: 15,
                     text: '\ue679',
                     style: {
                       fill: 'red'
                     },
                     labelCfg: {
                       style: {
                         fill: "orange"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   },
                   {
                     id: "AdaBoost",
                     label: "AdaBoost",
                     size: 15,
                     text: '\ue743',
                     style: {
                       fill: 'black'
                     },
                     labelCfg: {
                       style: {
                         fill: "purple"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                   },
                   {
                     id: "AdaBoost1",
                     label: "AdaBoost1",
                     size: 15,
                     text: '\ue743',
                     style: {
                       fill: 'black'
                     },
                     labelCfg: {
                       style: {
                         fill: "purple"
                       },
                     },
                     backgroundConfig: null,
                     levelFlag: 'originThree',
                     lineNum: 3,
                     collapsed: true,
                     children: [
                       {
                         id: "test son node for level 3",
                         label: "test son node for level 3",
                         size: 15,
                         text: '\ue743',
                         style: {
                           fill: 'black'
                         },
                         labelCfg: {
                           style: {
                             fill: "purple"
                           },
                         },
                         backgroundConfig: null,
                         levelFlag: 'originFour',
                         lineNum: 6,
                         collapsed: true,
                       },
                       {
                         id: "for level 3",
                         label: "for level 3",
                         size: 15,
                         text: '\ue743',
                         style: {
                           fill: 'black'
                         },
                         labelCfg: {
                           style: {
                             fill: "purple"
                           },
                         },
                         backgroundConfig: null,
                         levelFlag: 'originFour',
                         lineNum: 3,
                         collapsed: true,
                       }
                     ]
                   }
                 ]
               }
             ]
           },
           {
             id: "Regression",
             label: "Regression",
             size: 50,
             text: '\ue68c',
             isFisrtNodes: true,
             style: {
               fill: 'skyblue'
             },
             labelCfg: {
               style: {
                 fill: "skyblue"
               },
             },
             backgroundConfig: null,
             collapsed: true,
             levelFlag: 'originOne',
             lineNum: 3,
             children: [
               {
                 id: "Multiple linear regression",
                 label: "Multiple linear regression",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
               },
               {
                 id: "Partial least squares",
                 label: "Partial least squares",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
               },
               {
                 id: "Multi-layer feedforward neural network",
                 label: "Multi-layer feedforward neural network",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
               },
               {
                 id: "General regression neural network",
                 label: "General regression neural network",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 lineNum: 3,
               },
               {
                 id: "Support vector regression",
                 label: "Support vector regression",
                 size: 35,
                 text: '\ue78a',
                 isSubNodes: true,
                 style: {
                   fill: 'green'
                 },
                 labelCfg: {
                   style: {
                     fill: "skyblue"
                   },
                 },
                 backgroundConfig: null,
                 levelFlag: 'originTwo',
                 lineNum: 3,
               }
             ]
           }
         ]
       }, */

      orgData: {}
    }
  },
  mounted () {

    // let xxx = this.getTreeToArray(this.orgData, 0)
    // console.log(xxx)
    getTreeTopology().then(res => {
      // console.log(res)
      if (res.status === 1) {
        this.orgData = res.data
        setTimeout(() => {
          this.initGrahp()
        }, 10);
      }
    })
  },
  methods: {
    initGrahp () {
      let _that = this  //保存vue实例
      let tempObj = {}
      /**
       * 使用iconfont
       */
      G6.registerNode('iconfont', {
        draw (cfg, group) {
          const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg;

          if (backgroundStyle) {
            group.addShape('circle', {
              attrs: {
                x: 0,
                y: 0,
                r: cfg.size * 0.5,
                ...backgroundStyle,
              },
              name: 'circle-shape',
            });
          }

          const keyShape = group.addShape('text', {
            attrs: {
              x: 0,
              y: 0,
              fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.text,
              fontSize: cfg.size,
              // lineHeight: 44,
              ...style,
            },
            name: 'text-shape1',
          });
          /**
           * 使用iconfont后，背景的y轴偏移量
           */
          const labelY = backgroundStyle ? cfg.size : cfg.size * 0.9;

          group.addShape('text', {
            attrs: {
              x: 0,
              y: labelY,
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.label,
              ...labelStyle.style,
            },
            name: 'text-shape1',
          });
          return keyShape;
        },
      });
      /**
       * 添加右键点击节点的菜单及事件
       */
      const conextMenuContainer = document.createElement('ul');
      conextMenuContainer.id = 'contextMenu';

      // create li
      const firstLi = document.createElement('li');
      firstLi.innerHTML = `查看节点`;
      /**
       * 添加点击事件，点击时使显示详情的框出现
       * 显示数据为右键点击时存储在临时变量里的数据
       */
      firstLi.addEventListener('click', function (ev) {
        _that.isShowDetails = true
        _that.showNodeDetailsObj = tempObj
      })
      conextMenuContainer.appendChild(firstLi);
      document.getElementById('container').appendChild(conextMenuContainer);

      const width = document.getElementById('container').scrollWidth;
      const height = document.getElementById('container').scrollHeight || 500;

      const minimap = new G6.Minimap({
        size: [150, 100]
      });

      const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        linkCenter: true, //此属性需要，否则新增边时对应节点的连接位置不正确
        // renderer: 'canvas',
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange (item, collapsed) {
                console.log(item)
                const data = item.getModel().data;
                // console.log(data)
                data.collapsed = collapsed;
                return true;
              },
            },
            'drag-canvas',
            'zoom-canvas',
            'drag-node',
            {
              type: 'edge-tooltip', // 边提示框
              formatText (model) {
                // 边提示框文本内容
                console.log(model)
                const text =
                  // (model.id ? model.id : null) + `\n` + "端口连接数: " + model.targetNode._cfg.model.lineNum
                  model.id + `<br/>` + "端口连接数: " + model.targetNode._cfg.model.lineNum
                return text;
              },
              offset: -20
            },
          ],
        },
        defaultNode: {
          size: 26,
          color: '#5B8FF9',
          type: 'iconfont',
          /* style: {
            fill: '#C6E5FF',
            stroke: '#5B8FF9',
          }, */
          backgroundConfig: {
            backgroundType: 'circle',
            fill: '#40a9ff',
            stroke: 'LightSkyBlue',
          },
          style: {
            // lineWidth: 2,
            fill: '#C6E5FF',
            cursor: 'pointer',
          },
          labelCfg: {
            // offset: [60, 10, 10, 10],
            style: {
              fontSize: 14,
            }
          }
        },
        defaultEdge: {
          // type: 'cubic',
          // type: 'line',
          style: {
            stroke: '#A3B1BF',
            lineAppendWidth: 10,
          },
        },
        layout: {
          type: 'dendrogram',
          direction: 'LR',
          nodeSep: 20,
          rankSep: 120,
          radial: true,
          /**
           *  节点纵向间距、横向间距的回调函数
           *  设置后效果不明显
           */

          /* getVGap: d => {
            if (d.id === 'Modeling Methods') {
              return 200
            }
          },
          getHGap: d => {
            if (d.id === 'Modeling Methods') {
              return 200
            }
          }, */

        },
        plugins: [minimap] // 使用minimap插件
      });
      /**
       * 注意，使用graph.node()方法时，可能会导致节点拖动、画布缩放、新增边后点击节点收缩事件失效
       */

      graph.data(_that.orgData);
      graph.render();
      graph.fitView();

      /**
       * 将实例化的G6，赋给data中的currentGraph
       */
      _that.currentGraph = graph

      /**
       * 右键点击事件
       */
      let temporaryData = Object.assign({}, this.drawData)  //保存一份所有的原始数据信息（浅拷贝)
      graph.on('node:contextmenu', evt => {
        console.log(evt)
        evt.preventDefault();
        evt.stopPropagation();
        conextMenuContainer.style.left = `${evt.canvasX + 30}px`; //使菜单出现在节点的右侧
        conextMenuContainer.style.top = `${evt.canvasY}px`;
        tempObj = evt.item._cfg.model
      });

      graph.on('node:mouseleave', () => {
        conextMenuContainer.style.left = '-300px';
      });

      /**
       * 边的点击事件,点击边动态增加边
       * 树状图 存在问题，新增边后节点点击、画布拖动失效
       */
      graph.on('edge:dblclick', ev => {
        console.log(ev)
        let edgeSource = ev.item._cfg.model.source
        console.log(edgeSource)
        let edgeTarget = ev.item._cfg.model.target
        console.log(edgeTarget)
        // ev.item._cfg.model.type = 'arc'
        /* let allEdges = graph.findAll('edge', edge => {
          return edge
        });
        let allNodes = graph.findAll('node', node => {
          return node
        }) */

        // console.log(allNodes)
        // console.log(allEdges)
        /*let tempEdge = {}
        let tempNode = {}
        allEdges.forEach(item => {
          if (item._cfg.model.source._cfg.id === edgeSource._cfg.id && item._cfg.model.target._cfg.id === edgeTarget._cfg.id) {
            console.log("321312")
            console.log(item)
            tempEdge = item
          }
        }) */
        /* allNodes.forEach(item => {
          if (item._cfg.parent._cfg.id === edgeSource._cfg.id && item._cfg.id === edgeTarget._cfg.id) {
            tempNode = item
          }
        }) */
        // for (let j = 1; j <= 3; j++) {
        //   tempEdge._cfg.model.curveOffset = j * 15
        //   allEdges.push(tempEdge)
        // }
        // console.log(allEdges)
        // graph.refresh();
        // console.log(graph.save())
        let forLists = edgeTarget._cfg.model.lineNum
        console.log(forLists)
        let arr = []
        for (let i = 0; i < forLists; i++) {
          let addEdges = {
            source: edgeSource,
            target: edgeTarget,
            type: 'arc',
            curveOffset: 10
          }
          /**
           * 输出addEdges.curveOffset的值为 10，-10,20 -20的类型
           * 增量为10 
           */
          let arrItem = i / 2
          arr.push(Math.floor(arrItem))
          console.log(arr)
          for (let j = 0; j < arr.length - 1; j++) {
            if (j % 2 === 0) {
              addEdges.curveOffset = addEdges.curveOffset * (arr[j] + 1) * 1
            } else {
              addEdges.curveOffset = addEdges.curveOffset * (arr[j] + 1) * -1
            }
          }

          /**
           * 输出addEdges.curveOffset的值为 10，-10,30 -30的类型
           * 增量为20
           */
          /* if (i % 2 === 0) {
            addEdges.curveOffset = addEdges.curveOffset * i * 1
          } else {
            addEdges.curveOffset = addEdges.curveOffset * i * -1
          } */

          // console.log(addEdges.curveOffset)
          graph.addItem('edge', addEdges);
        }

      })


      /**
       * 点击画布 隐藏详细信息
       */
      graph.on('canvas:click', () => {
        _that.isShowDetails = false
      })


      /**
       * 初始化时不显示子级节点的处理
       */
      // graph.zoomTo(0.5, _that.getViewCenter())
    },
    getZoomOut () {
      let currentZoom = this.currentGraph.getZoom();
      this.currentGraph.zoomTo(currentZoom + 0.1, this.getViewCenter());
    },
    getZoomIn () {
      const currentZoom = this.currentGraph.getZoom();
      this.currentGraph.zoomTo(currentZoom - 0.1, this.getViewCenter());
    },




    refreshViews () {
      /**
       * 将graph实例销毁时，需要销毁画布
       */
      // this.currentGraph.clear();
      this.currentGraph.destroy();
      console.log('刷新视图')
      setTimeout(() => {
        this.initGrahp()
        /**
         * 由于收缩节点后，适应画布会导致节点图标巨大化，故在刷新视图后调用缩放函数
         */
        this.currentGraph.zoomTo(0.5, this.getViewCenter());
      }, 10)

      // this.currentGraph.zoomTo(0.5, this.getViewCenter());
      // this.currentGraph.changeData()
    },

    /**
     * 计算画布的padding值
     */
    getFormatPadding () {
      return Util.formatPadding(this.currentGraph.get("fitViewPadding"));
    },
    /**
     * 画布中心位置
     */
    getViewCenter () {
      const padding = this.getFormatPadding();
      const graph = this.currentGraph;
      const width = graph.get("width");
      const height = graph.get("height");
      console.log(width)
      console.log(height)
      return {
        x: (width - padding[2] - padding[3]) / 2 + padding[3],
        y: (height - padding[0] - padding[2]) / 2 + padding[0]
      };
    },

    closeDetail () {
      this.isShowDetails = false
      this.showNodeDetailsObj = {}
    },
    /**
     * 树状数据转化为数组
     */
    getTreeToArray (treeObj, rootid) {
      let temp = [] //临时数组，用来存放队列
      let out = []  // 输出数组，用来存放要输出的一堆数组
      temp.push(treeObj)
      //将根元素存放进out中
      let pid = rootid
      let obj = this.deeplyCopy(treeObj)
      obj.pid = pid
      delete obj['children']
      out.push(obj)
      //对树对象进行广度优先的遍历
      while (temp.length > 0) {
        let first = temp.shift()
        let children = first.children
        if (children && children.length) {
          pid = first.id
          let len = first.children.length
          for (let i = 0; i < len; i++) {
            temp.push(children[i])
            let obj = this.deeplyCopy(children[i])
            obj.pid = pid
            delete obj['children']
            out.push(obj)

          }
        }
      }
      return out
    },
    /**
     * 深拷贝
     */
    deeplyCopy (obj) {
      //数组
      if (Object.prototype.toString.call(obj) === "[object Array]") {
        let object = []
        for (let i = 0; i < obj.length; i++) {
          object.push(this.deeplyCopy(obj[i]))
        }
        return object
      }
      //对象
      if (Object.prototype.toString.call(obj) === "[object Object]") {
        let object = {}
        for (let j in obj) {
          object[j] = obj[j]
        }
        return object
      }

    },


  }
}
</script>

<style scoped>
.main-content-box {
  width: 95%;
  margin: 5px 20px;
}
.demoDiv {
  position: relative;
  padding: 20px;
  border: 1px solid skyblue;
}
.toolDiv {
  width: 50px;
  border: 1px solid #f5f5f5;
  position: absolute;
  z-index: 100;
}
/* #container {
  border: 1px solid rgb(145, 167, 175);
} */
.zoom {
  cursor: pointer;
  border: 1px solid #f5f5f5;
  font-size: 26px;
  background-color: #ffffff;
}
/* 右键菜单及显示详情区域 */
.showDetails {
  width: 12vw;
  height: 40vh;
  border: 1px solid #f5f5f5;
  box-shadow: -5px 5px 5px #aaaaaa;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 4px;
  background-color: #ffffff;
  padding: 5px;
  overflow-y: auto;
  font-size: 12px;
}
.details-title {
  text-align: left;
}
.closeDetail {
  position: absolute;
  right: 8px;
  top: 18px;
  cursor: pointer;
}
.closeDetail:hover {
  color: #e27e7e;
}
.details-info {
  margin: 0 10px;
  background-color: aquamarine;
}
.details-info-items {
  background-color: #ffffff;
  display: flex;
}
.details-info-items:last-child {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: baseline;
}
.info-items {
  font-size: 12px;
  color: #545454;
  text-align: left;
}
.info-items-label {
  color: #000000;
  text-align: left;
  width: 65px;
}
.info-items-description {
  height: 100px;
  width: 100%;
  border: 1px solid #d2bebe;
  margin-top: 0px;
  line-height: 24px;
}
/* 右键菜单 */
.demoDiv >>> #contextMenu {
  position: absolute;
  list-style-type: none;
  padding: 10px 8px;
  left: -300px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 14px;
  color: #545454;
  z-index: 2;
}
.demoDiv >>> #contextMenu li {
  cursor: pointer;
  list-style-type: none;
  list-style: none;
  margin-left: 0px;
}
.demoDiv >>> #contextMenu li:hover {
  color: #aaa;
}
.title_for_layout {
  position: absolute;
  top: 0;
  left: 100px;
  color: crimson;
}
.demoDiv >>> .g6-edge-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
/* Minimap */

.demoDiv >>> .g6-minimap-container {
  border: 1px solid #e2e2e2;
}
.demoDiv >>> .g6-minimap-viewport {
  border: 2px solid rgb(30, 156, 155) !important;
}
</style>